<template>
  <div class="audit_manage">
    <!--电核权限管理-->
    <div class="search" v-if="!isCaptain" v-show="showAuditorSearch">
      <el-form ref="form" :inline="true" :model="form">
        <el-form-item label="账号名称" prop="userName" :label="$t('common.accountName')">
          <el-input v-model="form.userName" placeholder="请输入账号名称" class="inputPhone" :placeholder="$t('authority.inputUsername')"></el-input>
        </el-form-item>
        <el-form-item label="角色类型" prop="roleId" :label="$t('common.roleType')">
          <el-select v-model="form.roleId" @change="roleTypeChange">
            <el-option v-for="item in customTypeList" :key="item.roleId" :value="item.roleId" :label="$root.local=='zhCN' ? item.roleName : item.idName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" icon="search">{{$t('authority.search')}}</el-button>
        </el-form-item>
      </el-form><!--end form-->
    </div>

    <!--电核权限管理-->
    <div class="data_list_panel">
      <waiting-list :custom-type-list="customTypeList" :search-form="form" :active-tab="activeTab" v-if="activeTab === 'waitingList'" @getData="getData" @search="hasSearch">待分配</waiting-list>
      <custom-assistant :active-tab="activeTab" :search-form="form" v-if="activeTab === 'customAssistant'"  @getData="getData" @search="hasSearch" :is-captain="isCaptain">电核专员</custom-assistant>
      <custom-manage :active-tab="activeTab" :search-form="form" v-if="activeTab === 'customManage'" @getData="getData" @search="hasSearch">电核主管</custom-manage>
      <tel-order-list :active-tab="activeTab" :search-form="form" v-if="activeTab === 'telOrderList'" @updateActiveTab="updateActiveTab"></tel-order-list>
    </div>
  </div>
</template>

<script>
  import waitingList from './waiting-list';
  import customAssistant from './custom-assistant';
  import customManage from './custom-manage';
  import telOrderList from './tel-order-list';
  import storage from '@/libs/storage';

  export default {
    name: 'telManage',
    components: {
      waitingList,
      customAssistant,
      customManage,
      telOrderList,
    },
    data() {
      return {
        activeTab: 'customManage',
        customTypeList: [],
        serverList: [],
        captainList: [],
        isCaptain: true,
        user: storage.get('user'),
        form: {
          accountId: '',
          userName: '',
          roleId: 2,
          leaderId: '',
          search: false,
        },
        rules: {
          userName: [],
          roleId: []
        },
      };
    },
    computed: {
      showAuditorSearch() {
        return this.activeTab !== 'telOrderList';
      }
    },
    methods: {
      // 获取电核角色
      getServiceType() {
        this.$api.tel.getAllUserRole().then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error) {
            this.customTypeList = data;
            this.customTypeList.forEach((item, index) => {
              // 这里需要去掉电核经理
              if (item.roleId === 3) {
                this.customTypeList.splice(index, 1);
              }
            });
            this.customTypeList.push({ roleId: 0, roleName: '待分配', idName: 'Menunggu pembagian' });
          }
        });
      },
      onSearch() {
        this.form.userName = this.form.userName.trim();
        if (this.form.userName) {
          this.form.search = true;
        }
      },
      // searchOrder(form, tab) {
      //   this.form = Object.assign({}, form);
      //   if (tab) {
      //     this.activeTab = tab;
      //   }
      // },
      hasSearch(val) {
        this.form.search = false;
      },
      updateActiveTab(val) {
        if (val) {
          this.activeTab = val;
          this.form.userName = '';
          this.$nextTick(() => {
            this.form.roleId = +this.form.roleId;
          });
        }
      },
      roleTypeChange(val) {
        this.form.userName = '';
        switch (+val) {
          case 0:
            this.activeTab = 'waitingList';
            break;
          case 1:
            this.activeTab = 'customAssistant';
            break;
          case 2:
            this.activeTab = 'customManage';
            break;
          default:
            this.activeTab = 'customManage';
        }
      },
      // 需要获取
      getData(form, type) {
        this.form = Object.assign(this.form, form);
        this.activeTab = type;
      },
      // 电核主管
      getCaptainList() {
        const params = {
          roleId: 2,
          userName: '',
          leaderId: '',
        };
        this.$api.tel.getAllUserInfo(params).then((res) => {
          const { status, data, error } = res;
          if ('1' === status && '00000000' === error && data.data) {
            this.captainList = data.data;
            const user = storage.get('user');
            this.isCaptain = false;
            this.captainList.forEach((item) => {
              if (item.userName === user.username) {
                this.isCaptain = true;
                this.form.roleId = 1;
                this.activeTab = 'customAssistant';
              }
            });
            if (!this.isCaptain) {
              this.activeTab = 'customManage';
            }
          }
        });
      },
    },
    created() {
      this.getCaptainList();
      this.getServiceType();
    }
  };
</script>

<style lang="scss" scoped>
  .data_list_panel{
    margin: 0;
  }
  .search{
    background-color: #fff;
    padding: 22px 40px 0;
  }
</style>
